﻿<template>
  <div v-loading = 'loading'>
    <div class = 'page_mainContent'>
      <!-- 上部的检索列表 -->
      <ul class = 'host_search_list'>
        <li v-for = "(item, index) in searchTabList" :key = 'index' @click = 'changeTableData(item)'
        :class = "item.pathValue === currentTabPath ? 'active' : ''">{{item.name}}</li>
      </ul>
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for = '(item, index) in tableColumn' :key = 'index' :label = 'item.text'
          show-overflow-tooltip>
            <template slot-scope = 'scope'>
              <span>{{scope.row}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '300px'>
            <template slot-scope = "scope">
              <!-- 源码列表时 -->
              <el-button type = 'text' @click = "handleEdit(scope.row)" v-if = "currentTabPath === '/hj/source/list'"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "compileMethod(scope.row)" v-if = "currentTabPath === '/hj/source/list'"><i class = 'iconfont icon-xiangmushenbao'></i>编译代码</el-button>
              <!-- 公用部分 -->
              <el-button type = 'text' @click = "handleCommlibEdit(scope.row)" v-if = "currentTabPath === '/hj/commlib/list'"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <!-- 已编译过的列表时 -->
              <el-button type = 'text' @click = "handleCompiledEdit(scope.row)" v-if = "currentTabPath === '/hj/compiled/list'"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "tryRunMethod(scope.row)" v-if = "currentTabPath === '/hj/compiled/list'"><i class = 'iconfont icon-tongguo'></i>运行脚本</el-button>
              <!-- <el-button type = 'text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button> -->
              <!-- <el-button type = 'text' @click = "handleDetail(scope.row)"><i class = 'iconfont icon-yanj'></i>详细</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" v-if = "currentTabPath === '/hj/source/list'" @click = 'handleAdd'>新 增</el-button>
          <el-button type = "primary" v-if = "currentTabPath === '/hj/source/list'" @click = 'compileAll'>编译代码</el-button>
        </div>
      </div>
    </div>
    <!-- 新增时的弹窗 -->
    <el-dialog title = '添加脚本名称' :visible.sync = 'dialogFormVisible_add' width = '60%' class = 'main_dialog md_dialog'
    :close-on-click-modal = 'false' :close-on-press-escape = 'false'>
      <el-form :model = "ruleForm" ref = "ruleForm" label-width = '120px' :rules =  'rules'>
        <el-form-item label = "脚本名称：" prop = 'addName'>
          <el-input placeholder = '请输入脚本名称' clearable v-model = 'ruleForm.addName'></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "primary" @click = "submitForm ('ruleForm')">下一步</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>
    <!-- 运行结果的弹窗 -->
    <Host-Js-Result-Dialog :showReusltDialog = 'resultDialog.showDialog'
    :defaultValue = 'resultDialog.resultValue' @closeResultDialog = 'resultDialog.showDialog = false'></Host-Js-Result-Dialog>
    <!-- 编辑的弹窗 -->
    <Host-Js-Edit-Dialog :showEditDialog = 'editDialog.showDialog'
    :hostName = 'editDialog.hostName' :showCompiled = 'editDialog.showCompiled'
    :defaultValue = 'editDialog.resultValue' @closeEditDialog = 'closeEditDialog'></Host-Js-Edit-Dialog>
  </div>
</template>

<script src='./hostJs.js'></script>
